<template>
	<view class="">
		<view class="video_up flex_col_c" :style="[boxSize]" v-if="!video_src" @click="upVideo">
			<u-icon name="camera-fill" color="#D3D4D6" size="26"></u-icon>
			<view class="mt4 btn_text fw500 fs22">{{uploadText}}</view>
		</view>
		<view class="video_up pr" :style="[boxSize]" v-else>
			<video :src="video_src" show-mute-btn :style="[boxSize,{'border-radius': '12rpx'}]"></video>
			<view class="close" @click="close">
				<u-icon name="close" color="#fff" size="9"></u-icon>
			</view>
		</view>
	</view>
	<!-- 使用
	 
	 -->
</template>

<script>
	export default {
		props: {
			uploadText: { //上传区域的提示文字
				typeof: String,
				default: '上传视频'
			},
			maxDuration: { //拍摄视频最长拍摄时间,单位s。最长支持60秒。
				typeof: Number,
				default: ''
			},
			width: {
				typeof: String,
				default: '160rpx'
			},
			height: {
				typeof: String,
				default: '160rpx'
			}
		},
		components: {},
		data() {
			return {
				video_src: '', //上传回调地址
			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			upVideo() { //上传视频
				uni.chooseVideo({
					maxDuration: 0,
					success: async (res) => {
						// console.log(res);
						if (this.maxDuration && res.duration > this.maxDuration) {
							uni.$u.toast('视频大于15s')
						} else {
							const result = await this.uploadFilePromise(res.tempFilePath)
							this.video_src = result.fullurl
							this.$emit('changeVideo', result)
						}
					}
				})
			},
			uploadFilePromise(url) { //上传图片
				return new Promise((resolve, reject) => {
					const uploadTask = uni.uploadFile({
						url: `${this.$http}${this.$uploadUrl}`, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							'token': ''
						},
						success: (res) => {
							setTimeout(() => {
								let resa = JSON.parse(res.data)
								// console.log(resa);
								if (resa.code == this.status_code) {
									resolve(resa.data)
								} else {
									uni.$u.toast(resa.msg)
									resolve('')
								}
							}, 500)
						},
						fail: (err) => {
							console.log(err);
						},
					});
					uploadTask.onProgressUpdate((res) => {
						// console.log(res, '===');
						uni.showLoading({
							title: `上传中${res.progress}%`
						})
						if (res.progress == 100) {
							uni.hideLoading();
						}
						setTimeout(() => {
							uni.hideLoading();
						}, 1000 * 60 * 2)
					})
				})
			},
			close() { //删除视频
				this.video_src = ''
				this.$emit('changeVideo', {
					fullurl: '',
					url: ''
				})
			}
		},
		computed: {
			boxSize() {
				let obj = {
					'width': this.width,
					'height': this.height,
				}
				return obj
			},
		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.video_up {
		width: 160upx;
		height: 160upx;
		background: #f4f5f7;
		border-radius: 12upx;

		.btn_text {
			color: #909193;
		}

		.close {
			position: absolute;
			top: 0;
			right: 0;
			background-color: #373737;
			height: 15px;
			width: 15px;
			display: flex;
			flex-direction: row;
			border-bottom-left-radius: 100px;
			align-items: center;
			justify-content: center;
			z-index: 3;
		}
	}
</style>